<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../res/css/common/font-awesome.min.css" media="all">
		<link rel="stylesheet" href="../../res/layui-config/css/app.css" media="all">
		<title>会员管理</title>
    </script>
	</head>
	<body>
		<div class="kit-table">
		    <form class="layui-form" lay-filter="kit-search-form">
				<!-- 左上角的两个按钮 -->
		        <div class="kit-table-header">
		            <div class="kit-search-btns">
		                <a href="javascript:;" data-action="add" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i> 新增</a>
		                <a href="javascript:;" data-action="del-bulk" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon">&#xe640;</i> 批量删除</a>
		            </div>
		            <div class="kit-search-inputs">
		                <div class="kit-search-keyword">
		                    <input type="text" class="layui-input" id="serach-one" name="menName" placeholder="请输入会员名.." onKeyUp="lockInput(this,'serach-two')"/>
		                    <button lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
		                </div>
		                <div class="kit-search-more" id="kit-search-more">更多筛选<i class="layui-icon">&#xe61a;</i></div>
		            </div>
		        </div>
				<!-- 搜索扩展工具条 -->
		        <div class="kit-search-mored layui-anim layui-anim-upbit">
		            <div class="kit-search-body">
		                <div class="layui-form-item">
		                    <label class="layui-form-label">用户名</label>
		                    <div class="layui-input-block">
		                        <input type="text" name="menName" id="serach-two" placeholder="请输入用户名" autocomplete="off" class="layui-input" onKeyUp="lockInput(this,'serach-one')">
		                    </div>
		                </div>
		                <div class="layui-form-item">
		                    <label class="layui-form-label">手机号码</label>
		                    <div class="layui-input-block">
		                        <input type="text" name="memPhone" id="serach-two" placeholder="请输入手机号码" autocomplete="off" class="layui-input" onKeyUp="lockInput(this,'serach-one')">
		                    </div>
		                </div>
		                <div class="layui-form-item">
		                    <label class="layui-form-label">地址</label>
		                    <div class="layui-input-block">
		                        <input type="text" name="memAddress" id="serach-two" placeholder="请输入地址" autocomplete="off" class="layui-input" onKeyUp="lockInput(this,'serach-one')">
		                    </div>
		                </div>
		                <div class="layui-form-item">
			                <label class="layui-form-label">会员等级</label>
			                <div class="layui-input-block">
			                    <select name="oper" id="serach-two">
			                      <option value=""></option>
			                    </select>
			                </div>
		                </div>
		                
		            </div>
		            <div class="kit-search-footer">
		                <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary kit-btn reset-btn">重置</button>
		                <button lay-submit lay-filter="search" class="layui-btn layui-btn-sm kit-btn">确定</button>
		            </div>
		        </div>
		    </form>
				
			<!-- 操作按钮 -->
		    <div class="kit-table-body">
		        <table id="demo" lay-filter="demo"></table>
		        <script type="text/html" id="barDemo">
		            <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
		            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		        </script>
		    </div>
		</div>
		
		<!-- 修改页面 -->
		<script type="text/html" id="edit-tpl">
		    <div style="margin:10px">
		        <form class="layui-form" action="" lay-filter="form-edit">
		            <input type="hidden" name="menId" value="{{d.rowdata.menId}}" />
					<input type="hidden" name="memPictrue" value="{{d.rowdata.memPictrue}}">
		            <div class="layui-form-item">
		                <label class="layui-form-label">用户名</label>
		                <div class="layui-input-block">
		                    <input type="text" id="menNameInput" name="menName" maxlength="10" required lay-verify="required" value="{{d.rowdata.menName}}" placeholder="请输入用户名" onblur="findMenName()" autocomplete="off" class="layui-input">
		                </div>
		            </div>
		           
					<div class="layui-form-item">
		                <label class="layui-form-label">用户密码</label>
		                <div class="layui-input-block">
		                    <input type="text" name="memPwd" maxlength="10" required lay-verify="required" value="{{d.rowdata.memPwd}}" placeholder="请输入密码" autocomplete="off" class="layui-input">
		                </div>
		            </div>
					<div class="layui-form-item">
		                <label class="layui-form-label">手机号码</label>
		                <div class="layui-input-block">
		                    <input type="text" name="memPhone" maxlength="10" required lay-verify="required" value="{{d.rowdata.memPhone}}" placeholder="请输入手机号" autocomplete="off" class="layui-input">
		                </div>
		            </div>
		            <div class="layui-form-item">
		                <label class="layui-form-label">地址</label>
		                <div class="layui-input-block">
		                    <input type="text" name="memAddress" maxlength="30" required lay-verify="required" value="{{d.rowdata.memAddress}}" placeholder="请输入地址" autocomplete="off" class="layui-input">
		                </div>
		            </div>
					<div class="layui-form-item">
		                <label class="layui-form-label">会员等级</label>
		                <div class="layui-input-block">
		                    <select name="oper" required lay-verify="required">
		                      <option value="请选择类型">请选择类型</option>
							  <option value="非会员">非会员</option>
		                      <option value="普通会员">普通会员</option>
							  <option value="高级会员">高级会员</option>
							  <option value="顶级会员">顶级会员</option>
		                    </select>
		                </div>
		            </div>
					<div class="layui-upload">
                		<label class="layui-form-label">头像</label>
                		<div class="layui-upload layui-input-block">
		  					<button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon">&#xe67c;</i>{{d.rowdata.msg}}</button>
		  					<div class="layui-upload-list" style="display: none">
		    					<img class="layui-upload-img" id="pic" src="../../{{d.rowdata.memPictrue}}" name="memPictrue" style="width: 100px;height: 100px">
		    					<p id="errorText"></p>
		  					</div>
						</div>
            		</div>
					
		            <div class="layui-form-item" style="display:none;">
		                <div class="layui-input-block">
		                    <button class="layui-btn" lay-submit lay-filter="formEdit">立即提交</button>
		                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		                </div>
		            </div>
		        </form>
		    </div>
		</script>
		<script src="../../res/js/common/jquery-1.11.2.min.js"></script>
		<script type="text/html" id="img">
			<img style="height:100%;height:30px;" onclick="getPathOver(this)" src="../../{{ d.memPictrue}}">
		</script>
		<script>
			//搜索框同步输入
			function lockInput(obj,id){
				$("#"+id).val($(obj).val());
			}
		</script>
		<script src="../../res/layui/layui.all.js"></script>
		<script>
			//显示表格数据
		    layui.use(['table','upload','laydate'], function() {
		        var table = layui.table,
		            $ = layui.jquery,
		            layer = layui.layer,
		            form = layui.form,
		            laytpl = layui.laytpl,
		            laydate=layui.laydate;
		        
		        laydate.render({
		        	elem:'#date'
		        });
		        laydate.render({
		        	elem:'#time'
		        });
		        var tableIns = table.render({
		            elem: '#demo',
		            height: 'full-50', //容器高度
		            url: '../../member/query.action',
		            page: true,
		            id: 'demo',
		            cols: [
		                [{checkbox: true,fixed: true},
		                {field: 'menId',title: 'ID', width: 110,align: 'center'},
		                {field: 'menName',title: '用户名',width: 100,align: 'center'},
		                {field: 'memPwd',title: '密码',width: 100,align: 'center'},
		                {field: 'memPhone',title: '电话号码',width: 130,align: 'center'},
		                {field: 'memAddress',title: '地址',width: 120,align: 'center'},
		                {field: 'oper',title: '会员等级',width: 120,align: 'center'},
		                {field: 'memPictrue',title: '头像',width: 100,align: 'center',templet:'#img'},
		                {field: 'optimeString',title: '操作时间',width: 170},
		                {fixed: 'right',title: '操作',width: 180,align: 'center',toolbar: '#barDemo'}]
		            ],
		            done: function(res, curr, count) {
		                $("[date-fixed='isva']").children().each(function(){
		                	if($(this).text()==1){
		                		$(this).text("有效");
		                	}else if($(this).text()==0){
		                		$(this).text("无效");
		                	}
		                });
		            },
		            loading: true,
		        });
		        
		        //监听搜索表单提交
		        form.on('submit(search)', function(data) {
		            //带条件查询
		            tableIns.reload({
		                where: data.field,
		                page: { curr:1 }
		            });
		            $('.kit-search-mored').hide();
		            return false;
		        });
		        
		        //渲染 修改和增加弹出层
			    function showlayer(d){
			    	laytpl($('#edit-tpl').html()).render(d,function(html) {
	                    layer.open({
	                        type: 1,
	                        title: '表单',
	                        content: html,
	                        area: ['800px', '430px'],
	                        btn: ['提交', '重置', '取消'],
	                        yes: function(index, layero) {
	                            editIndex = index;
	                            $('form[lay-filter="form-edit"]').find('button[lay-submit]').click();
	                        },
	                        btn2: function(index, layero) {
	                            $('form[lay-filter="form-edit"]').find('button[type="reset"]').click();
	                            return false;
	                        },
	                        success: function() {
	                            form.render(null, 'form-edit');
	                        }
	                    });
	                    upload();
	                });
			    }
		        
		        //监听工具条按钮点击
		        table.on('tool(demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		            var data = obj.data; //获得当前行数据
		            var layEvent = obj.event; //获得 lay-event 对应的值
		            var tr = obj.tr; //获得当前行 tr 的DOM对象
		
		            if (layEvent === 'detail') { //查看
		                console.log(table.checkStatus('demo'));
		            } else if (layEvent === 'del') { //删除
		                layer.confirm('真的删除行么', function(index) {
		                	layer.close(index);
		                    update("../../member/addMember.action",{"menId":data.menId,"isva":"0"});
		                });
		            } else if (layEvent === 'edit') { //编辑
		            	data["msg"]="更改图片";
		                var d = {
		                	rowdata: data,
		                };
		                showlayer(d);
		                $(".layui-upload-list").css("display", "block");
		            }
		        });
		        
		        //表单渲染
		        form.render(null, 'kit-search-form');
		        //更多筛选点击事件
		        $('#kit-search-more').on('click', function() {
		            $('.kit-search-mored').toggle();
		        });
		        var editIndex;
		        
		        //增加和修改弹出层   提交按钮点击事件
		        form.on('submit(formEdit)', function(data) {
                	if ($("[name=memPictrue]").val()=="") {
                		layer.msg('未上传文件');
                    	$("#fileBtn").html('<span style="color:red"><i class="layui-icon">&#xe67c;</i>选择文件</span>');
                    	form.render(null, 'form-edit');
                    	return false;
                    }
                	$.ajax({ url:"../../member/addMember.action",
                        type:'post',//method请求方式，get或者post
                        cache: false,//同步
                        dataType:'json',//预期服务器返回的数据类型
                        data:JSON.stringify(data.field),//表格数据序列化
                        contentType: "application/json; charset=utf-8",
                        success:function(mes){//res为相应体,function为回调函数
	                        if(mes.status==1){ 
		                        $("#res").click();//调用重置按钮将表单数据清空
		                        history.go(0);location.reload();//返回上一页重载页面，本地刷新
	                        	layer.msg(mes.msg,{icon:1});
	                        } else {
	                        	layer.msg(mes.msg,{icon:5});
	                        }
                        },
                       	error:function(){layer.alert('操作失败！！！',{icon:5});}
	                 });
                	
                	if (close) editIndex && layer.close(editIndex); //关闭弹出层
                	return false;
		        });
		        
		        //增加、批量删除 按钮点击事件
		        $('.kit-search-btns').children('a').off('click').on('click', function() {
		            var $that = $(this),
		                action = $that.data('action');
		            switch (action) {
		            	//点击的是 增加按钮
		                case 'add':
		                    var d = {
		                		//替换增加页面文本框内出现的undefine
		                        rowdata: {
		                        	menId: '',menName: '',memPwd: '',memPhone: '',memAddress: '',memPictrue: '',optimeString: '',oper: '',msg: '选择图片'
		                        },
		                    };
		                    showlayer(d);
		                    break;
		                    
		                //点击的是 批量删除按钮
		                case 'del-bulk':
		                    var d = table.checkStatus('demo');
		                    if (d.data.length === 0) {
		                        layer.msg('请选择要删除的数据');
		                        return;
		                    }
		                    var data = d.data,
		                        names = [],
		                        ids = [];
		                    layui.each(data, function(index, item) {
		                        names.push(item.menName);
		                        ids.push(item.menId);
		                    });
		                    layer.confirm('真的删除行么', function(index) {
		                    	layer.close(index);
		                    	update("../../member/bulkUpdate.action",ids);
			                });
		                    break;
		            }
		        });
		    });
		    
		    //增加、修改、删除、批量删除 都是用的这一个方法
		    function update(url,data){
		    	$.ajax({
		    		url: url,
                    type:'post',//method请求方式，get或者post
                    cache: false,//同步
                    dataType:'json',//预期服务器返回的数据类型
                    data: JSON.stringify(data),//表格数据序列化
                    contentType: "application/json; charset=utf-8",
                    success:function(mes){//res为相应体,function为回调函数
                    	$(".layui-laypage-btn")[0].click();//当前表格刷新
                        if(mes.status==1){ 
                        	var close = true;//有弹出层时是关闭弹出层 false不关闭
	                        $("#res").click();//调用重置按钮将表单数据清空
                        }
                        layer.msg(mes.msg);
                    },
                   	error:function(){layer.alert('数据异常，请稍后重试！！！',{icon:5});}
                 });
		    }
		    
		    //上传文件
		    function upload(){
		    	//普通图片上传
		        var uploadInst = layui.upload.render({
		          elem: '#fileBtn'
		          ,url: '../../member/upload.action'
		          ,before: function(obj){
		            //预读本地文件示例，不支持ie8
		            obj.preview(function(index, file, result){
		            	$(".layui-upload-list").css("display", "block");
		                $('#pic').attr('src', result); //图片链接（base64）
		            });
		          }
		          ,done: function(res){
		            //如果上传失败
		            if(res.code > 0){
		              return layer.msg('上传失败');
		            }
		            //上传成功
		            $("input[name=memPictrue]").val(res.obj);
		            $(".layui-upload-list").css("display", "block");
	           		$("#fileBtn").html('<i class="layui-icon">&#xe67c;</i>更改图片');
	           		form.render('form-edit');
		          }
		          ,error: function(){
		            //演示失败状态，并实现重传
		            var demoText = $('#errorText');
		            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		            demoText.find('.demo-reload').on('click', function(){
		              uploadInst.upload();
		            });
		          }
		        });
		    }
		    
		    //ajax加载动画
		    $(function () {
	            $.ajaxSetup({
	                layerIndex:-1,
	                beforeSend: function () {
	                    this.layerIndex = layer.load(1, { shade: [0.8, '#ffffff'] });
	                },
	                complete: function () {
	                    layer.close(this.layerIndex);
	                },
	                error: function () {
	                    layer.alert('部分数据加载失败，可能会导致页面显示异常，请刷新后重试', {
	                        skin: 'layui-layer-molv'
	                       , closeBtn: 0
	                       , shift: 4 //动画类型
	                    });
	                }
	            });
	        });
		    function findMenName(){
		    	var url="../../member/findMenName.action";
		    	var data={"menName":$("#menNameInput").val()};
		    	$.post(url,data,function(mes){
		    		if(mes!=0){
		    			layer.msg("用户名重复");
		    		}
		    		
		    	},"json");
		    	
		    }
		</script>
	</body>
</html>